<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--父元素默认高度被子元素撑开，子元素浮动后脱离文档流，导致父元素高度丢失 -->
		<!-- 父元素高度丢失后，其下元素会自动上移，导致页面布局混乱 -->
		<div class="outer">
			<div class="inner">
			</div>
		</div>
	</body>
</html>
<style type="text/css">
	.outer{
		/* BFC(块级格式化环境) */
		/* BFC是css中一个隐含的属性，开启bfc的元素会变成一个独立的布局区域 */
		/* 开启bfc的元素不会被浮动元素覆盖 */
		/* 开启bfc元素子元素和父元素外边距不会重叠 */
		
		
		/* 开启bfc的元素可以包裹浮动的子元素 */
		/* float: left; */
		/* 开启bfc：设置元素浮动, 将元素设置为行内块元素 */
		/* display: inline-block; */
		/* 将元素的overflow设置为非visible值 */
		overflow: auto;
		
		border: 10px solid;
		
	}
	.inner{
		height: 100px;
		width: 100px;
		background-color: #7FFFD4;
		float: left;
	}
</style>
